<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>段落</title>
</head>
<body>
    <p>正常的段落</p>
    <p class="lead">突出的段落</p>
    <!-- 强调 -->
    <p><b>加粗字体</b></p>
    <p><code>This is computer code.</code></p>
    <p><em>前调文本</em></p>
    <p><i>斜体文本</i></p>
    <p><mark>显示高亮背景的文本</mark></p>
    <p><small>缩小字体</small></p>
    <p><strong>重点强调的字体</strong></p>
    <p>这是<sub>下标</sub>和<sup>上标</sup></p>
    <p><ins>给文本添加下划线</ins></p>
    <p><del>给文本添加删除线</del></p>
    <hr>
    <!-- 文本水平对齐 -->
    <p class="text-left">左对齐的文本</p>
    <p class="text-center">中间对齐的文本</p>
    <p class="text-right">右对齐的文本</p>
    <p class="text-justify">垂直对齐</p>
    <hr>
    <!-- 大小写转换 -->
    <!-- 所有字母小写 -->
    <p class="text-lowercase">NIIT is leading training institute</p>
    <!-- 所有字母大写 -->
    <p class="text-uppercase">NIIT is leading training institute</p>
    <!-- 所有单词首字母大写 -->
    <p class="text-capitalize">NIIT is leading training institute</p>
    <hr>
    <!-- bootstrap通过固定的及格单词来控制颜色，包括文本。按钮等 -->
    <p class="text-primary">primary：操作前请详细阅读说明书。</p>
    <p class="text-secondary">secondary：这个功能已从最新版本中删除。</p>
    <p class="text-success">success：登录成功。</p>
    <p class="text-info">info:您必须同意条款，已完成注册过程。</p>
    <p class="text-warning">warning:您的网络连接有问题。</p>
    <p class="text-danger">danger:提交数据时发送错误。</p>
    <p class="text-muted">muted:这段文字已涂上灰色。</p>
    <p class="text-dark">dark:这段文字已涂上黑色。</p>
<!-- 缩写 -->
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<!-- 地址：一般用在网页的页脚 -->
<!-- address作为语义标签，只有一个display:block -->
<hr>
<address>
    <strong>NIIT Ltd</strong><br>
    上海xxxxxx <br>
    <abbr title="Phone">(123) 456-12345</abbr>
</address>
<address>
    <strong>官方网站</strong>
    <a href="www.niit.con">www.niit.com</a>
</address>
    <hr>
<!-- 引用 -->
<blockquote class="blockquote">
<p>
    为中华之崛起而读书
</p>
<footer class="blockquote-footer">
    by
    <cite>
        周恩来
    </cite>
</footer>
</blockquote>
<hr>
<!-- 列表 -->
<!-- 未样式化 -->
<h2>去除列表样式</h2>
<!-- 去除列表选项前面的小点 -->
<ul class="list-unstyled">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>bootstrap</li>
</ul>
<h2>行内列表</h2>
<ul class="list-inline">
    <li class="list-inline-item">HTML</li>
    <li class="list-inline-item">CSS</li>
    <li class="list-inline-item">JavaScript</li>
    <li class="list-inline-item">bootstrap</li>
</ul>
<h2>列表对齐</h2>
<dl class="row">
    <dt class="col-3">HTML</dt>
    <dt class="col-9">用来开发网站的基础框架</dt>
    <dt class="col-3">Bootstrap</dt>
    <dt class="col-9">用来开发响应式的网站</dt>
</dl>
</body>
</html>